<template>
	<view class="evaluate-wrap">
		<view class="score-wrap">
			<text class="bold name">评价</text>
			<text :class="[`iconfontPT star ${ item.checked ? 'iconshoucang-yixuanzhong' : 'iconshoucang-weixuanzhong' }`]"
			 @click="handleEvaluate(index)" v-for="(item,index) in starList" :key="index"></text>
			<text class="evaluate-name">{{evaluateName}}</text>
		</view>
		<view class="content-wrap bg-white">
			<view class="textarea-content">
				<textarea placeholder="亲，来评价下用餐体验吧，还可以从餐厅是否卫生，店内是否分散就餐等方面描述哦~" class="w100 textarea" :fixed="true" maxlength="300"
				 cursor-spacing="20" :show-confirm-bar="false" v-model="form.content" confirm-type="send"></textarea>
			</view>
			<view class="image-wrap flex-x-start">
				<UploadGallery :cdn="true" :value="form.img?form.img.split(','):[]" @change="handleChangeUpload"></UploadGallery>
			</view>
		</view>
		<view class="confirm-btn-wrap w100 bg-white">
			<button class="confirm-btn" hover-class="hoverClass" @click="handleConfirm">
				提交评价
			</button>
		</view>
	</view>
</template>

<script>
	import {addEvaluate} from '@/apis/personal/index.js';
	import verification from '@/utils/verification.js'
	import UploadGallery from '@/pages/components/public/upload-gallery.vue'


	export default {
		data() {
			return {
				starList: [{
					checked: 0,
					score: 1,
				}, {
					checked: 0,
					score: 2,
				}, {
					checked: 0,
					score: 3,
				}, {
					checked: 0,
					score: 4,
				}, {
					checked: 0,
					score: 5,
				}],
				form:{
					store_id: '',
					order_no: '',
					score: 0,
					content:'',
					img: ''
				},
				rules:{
					content:[{
						required: true,
						message: '请输入评价内容！'
					}],
					img:[{
						required: true,
						message: '请上传照片！'
					}]
				}
			}
		},
		components:{
			UploadGallery
		},
		computed: {
			evaluateName() {
				return new Map([
					[1,'非常差'],
					[2,'较差'],
					[3,'一般'],
					[4,'很好'],
					[5,'非常好']
				]).get(this.form.score)
			}
		},
		methods: {
			handleEvaluate(i) {
				this.starList.forEach((item, index) => (item.checked = index <= i ? 1 : 0))
				this.form.score = this.starList[i].score
				
			},
			handleChangeUpload(list){
				this.form.img = list.toString()
			},
			handleConfirm() {
				this.$verification(this.form, this.rules, async ok=>{
					try{
						if(ok){
							if(this.evaluateName){
								const {code,data,msg} = await addEvaluate(this.form)
								if(code===200){
									await uni.showToast({title:'发布评论成功！',icon: 'none'})
									uni.navigateTo({
										url:'/pages/personal/order/index?state=4'
									})
								}
		
							}else{
								uni.showToast({
									title:'请打分！',
									icon: 'none'
								})
							}
						}
					}catch(e){
						uni.showModal({ title:'出错啦！',content:e.message,showCancel:false})
					}
				})
			}
		},
		onLoad(options) {
			this.form.store_id = options.store_id
			this.form.order_no = options.order_no
		}
	}
</script>

<style lang="less">
	.evaluate-wrap {
		.score-wrap {
			border-bottom: 1rpx solid rgba(201, 201, 201, .5);
			margin: 30rpx;
			padding-bottom: 40rpx;

			.name {
				font-size: 34rpx;
				margin-right: 30rpx;
			}

			.evaluate-name {
				font-size: 30rpx;
				color: #9A9A9A;
			}

			.star {
				margin-right: 28rpx;
				font-size: 48rpx;

				&.iconshoucang-yixuanzhong {
					color: #FCD100;
				}
			}
		}

		.content-wrap {
			padding: 30rpx;
			box-sizing: border-box;

			.textarea-content {
				height: 400rpx;
				overflow: scroll;
				margin-bottom: 50rpx;

				.textarea {
					height: 400rpx;
				}
			}

			.image-wrap {

				.image-item {
					margin: 5px;
					margin-bottom: 20rpx;

					&::after {
						position: absolute;
						top: 0;
						left: 0;
						content: '';
						width: 100%;
						height: 100%;
						display: inline-block;
						background: rgba(0, 0, 0, .5);
						z-index: 1;
					}

					.delete {
						z-index: 2;
						position: absolute;
						left: 80%;
						top: 5%;
					}

					.image {
						width: 200rpx;
						height: 200rpx;
					}
				}

				.chooseImage {
					width: 200rpx;
					height: 200rpx;
					background: #f8f8f8;

					.text {
						font-size: 24rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}
		}

		.confirm-btn-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			height: 166rpx;

			.confirm-btn {
				width: 690rpx;
				margin-top: 15rpx;
				background: #E41805FF;
				color: #ffffff;
				font-size: 30rpx;
			}
		}
	}
</style>
